import 'package:flutter/material.dart';
import 'category_page.dart';
import 'home_page.dart';
import 'favorite_page.dart';
import 'find_page.dart';

class BottomMenuBarPage extends StatefulWidget {
  const BottomMenuBarPage({super.key});
  @override
  State<BottomMenuBarPage> createState() => _PageState();
}

class _PageState extends State<BottomMenuBarPage> {
  // 创建一个变量用于记录当前激活的菜单下标
  // 初始值即为默认激活的菜单下标
  int currentIndex = 0;

  final List<Widget> _pages = [
    // 您可以添加主页页面组件
    HomePage(),
    FavoritePage(),
    FindPage(),
    CategoryPage(),
  ];

  // 菜单项列表（可以单独定义，也可以直接在属性中定义，主要看哪个方便）
  final List<BottomNavigationBarItem> items = const <BottomNavigationBarItem>[
    BottomNavigationBarItem(icon: Icon(Icons.home_outlined,), label: "首页"),
    BottomNavigationBarItem(icon: Icon(Icons.favorite_outline_rounded), label: "收藏"),
    BottomNavigationBarItem(icon: Icon(Icons.confirmation_num_outlined), label: "发现"),
    BottomNavigationBarItem(icon: Icon(Icons.category_outlined), label: "分类"),
  ];


  // | → setState()：用于通知 UI 重绘
  // | → 每次重绘都会调用 build 方法，由于变量已经更新，所以 build 重绘时就会把最新的数据绘制到当前页面上；
  void changeIndex(int activeIndex) {
    // Lambda 简洁形式：() => expression
    setState(() => currentIndex = activeIndex);
    // 完整写法：
    // setState(() {
    //  currentIndex = activeIndex;
    // });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).canvasColor,
      // body: _pages[currentIndex], // 根据currentIndex显示相应的页面
      body: IndexedStack(index: currentIndex, children: _pages),
      bottomNavigationBar: BottomNavigationBar(
        items: items,
        onTap: changeIndex,
        currentIndex: currentIndex,
        // showSelectedLabels: false,
        // showUnselectedLabels: false,
        // 确保这里设置的属性与ThemeData中的一致
        backgroundColor: Theme.of(context).bottomNavigationBarTheme.backgroundColor,
        selectedItemColor: Theme.of(context).bottomNavigationBarTheme.selectedItemColor,
        unselectedItemColor: Theme.of(context).bottomNavigationBarTheme.unselectedItemColor,
      ),
    );
  }
}